{% extends 'layouts/base.html' %}

{% load static %}

{% block content %}

    <section class="category-header-area">
        <div class="container-lg">
            <div class="row">
                <div class="col">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="<?php echo site_url('home'); ?>"><i
                                    class="fas fa-home"></i></a></li>
                            <li class="breadcrumb-item active">
                                Search Results
                            </li>
                        </ol>
                    </nav>
                    <h1 class="category-name">
                        Search Results For "{{ request.GET.q }}"
                    </h1>
                </div>
            </div>
        </div>
    </section>
    <br>
    <section class="category-course-list-area">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="category-course-list">
                        <ul>
                            {% for course in courses %}
                                <li>
                                    <div class="course-box-2">
                                        <div class="course-image">
                                            <a href="{% url 'courses:course-details' course.slug %}">
                                                <img src="{{ course.thumbnail.url }}"
                                                     style="height: 250px; width: 250px" alt="" class="img-fluid">
                                            </a>
                                        </div>
                                        <div class="course-details">
                                            <a href="{% url 'courses:course-details' course.slug %}"
                                               class="course-title">{{ course.title }}</a>
                                            <a href="" class="course-instructor">
                                                <span class="instructor-name">Instructor Name</span>
                                            </a>
                                            <div class="course-subtitle">
                                                {{ course.short_description|truncatewords:30 }}
                                            </div>
                                            <div class="course-meta">
                                            <span class=""><i class="fas fa-play-circle"></i>
                                                {{ course.lessons.count }}
                                            </span>
                                                <span class=""><i class="far fa-clock"></i>
                                                    20:00:00
                                            </span>
                                                <span class="">
                                                <i class="fas fa-closed-captioning"></i>{{ course.language }}
                                            </span>
                                            </div>
                                        </div>
                                        <div class="course-price-rating">
                                            <div class="course-price">
                                                <span class="current-price">{{ course.price }}</span>
                                            </div>
                                            <div class="rating">

                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <span class="d-inline-block average-rating">3</span>
                                            </div>
                                            <div class="rating-number">
                                                20 Ratings
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            {% empty %}
                                <p>Nothing found!</p>
                            {% endfor %}
                        </ul>
                    </div>
                {% if is_paginated %}
                    <div class="row">
                        <div class="col-md-12">
                            <nav aria-label="Page navigation example" class="d-flex justify-content-center mt-4 mb-4">
                                <ul class="pagination">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a href="?page={{ page_obj.previous_page_number }}"
                                               class="page-link">&laquo;</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item disabled">
                                            <a class="page-link">&laquo;</a>
                                        </li>
                                    {% endif %}
                                    {% for i in page_obj.paginator.page_range %}
                                        {% if page_obj.number == i %}
                                            <li class="page-item active">
                                                <a class="page-link">{{ i }}</a>
                                            </li>
                                        {% else %}
                                            <li class="page-item">
                                                <a href="?page={{ i }}&q={{ request.GET.q }}" class="page-link">{{ i }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a href="?page={{ page_obj.next_page_number }}"
                                               class="page-link">&raquo;</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item disabled">
                                            <a class="page-link">&raquo;</a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                {% endif %}
                </div>
            </div>
        </div>
    </section>

{% endblock %}